<template>
    <view class="code-box">
        <qr-stream @decode="onDecode" class="mb">
            <div style="color: #2596D7;" class="frame"></div>
        </qr-stream>
        <view class="go-back" @click="goBackFn()">
            <van-icon name="arrow-left" />
        </view>
    </view>
</template>
  
<script setup>
import { onLoad } from "@dcloudio/uni-app"
// #ifdef H5
import {QrStream,QrCapture,QrDropzone} from 'vue3-qr-reader';
// #endif
// app.component('QrStream',QR.QrStream)
// app.component('QrCapture',QR.QrCapture)
// app.component('QrDropzone',QR.QrDropzone)
const emit = defineEmits(['succesCode','closeScanCode'])

const createEq = async (data) => {
    // let resArr = data.split("/")
    // let params = {
    //     id: resArr[0],
    //     name: resArr[1]
    // }
    console.log(data, '分割后的结果')
    emit('succesCode',data)
}

const onDecode = (data) => {
    if (data && (data.indexOf('/') != -1)) {
        createEq(data) // 生成设备
    } else {
        uni.showToast({
            title: '没有获取到数据'
        });
        goBackFn()
    }
}

const goBackFn = () => {
    uni.hideLoading()
    emit("closeScanCode")
}

onLoad((e) => {

})

</script>
  
<style lang="scss" scoped>
.code-box,
.mb {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8;
}

.go-back {
    width: 80rpx;
    height: 80rpx;
    position: fixed;
    top: 30rpx;
    left: 30rpx;
    background: rgba(0, 0, 0, .3);
    z-index: 9;
    border-radius: 50%;

    .van-icon {
        font-size: 48rpx;
        color: #fff;
        width: 80rpx;
        line-height: 80rpx;
        text-align: center;
    }
}

.code-box {
    background: #fff;
}
</style>
  